import { useState } from 'react';
import { Button, ButtonProps, Modal, ModalProps, Tooltip } from 'antd';
import { QuestionCircleFilled } from '@ant-design/icons';

export interface HelpModalProps {
  buttonProps?: ButtonProps;
  modalProps?: ModalProps;
  content: string[];
}

export const HelpModal = ({
  buttonProps,
  modalProps,
  content,
}: HelpModalProps) => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Tooltip title={modalProps?.title}>
        <Button
          style={{
            fontSize: 32,
            position: 'absolute',
            right: 0,
            top: 0,
          }}
          type="link"
          onClick={(event) => {
            event.stopPropagation();
            setVisible(true);
          }}
          {...buttonProps}
        >
          <QuestionCircleFilled />
        </Button>
      </Tooltip>
      <Modal
        visible={visible}
        onCancel={(e) => {
          e.stopPropagation();
          setVisible(false);
        }}
        footer={null}
        {...modalProps}
      >
        {content.map((paragraph) => (
          <p key={paragraph}>{paragraph}</p>
        ))}
      </Modal>
    </>
  );
};
